<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"/>
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				height: 100vh;
			}
			.mb20 {
				margin-bottom: 20px;
			}
			.table {
				margin-bottom: 0;
			}
			.page-nav {
				float: right;
			}
			table>td{
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				max-width: 60px;

			}
		</style>
	</head>
	<body>
	<div id="app">
      <!-- 路径导航 -->
      <ol class="breadcrumb">
        <li>首页</li>
        <li class="active">新闻管理</li>
      </ol>
      <!-- 工具栏 -->
		  <div class="container-fluid mb20">
				<form class="form-inline" id="searchForm" action="NewsManagement.html" method="post">
					<div class="form-group">
						<input type="text" name="title" placeholder="请输入标题" class="form-control" v-model="acct">
					</div>
					<div class="form-group btn-group">
						<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 搜索</button>
					</div>

					<div class="form-group btn-group">
						<button type="reset" class="btn btn-primary" onclick="clearSearchForm()"><span class="glyphicon glyphicon-erase"></span> 清空</button>
					</div>
					<div class="form-group btn-group">
						<button type="button" class="btn btn-primary" onclick="delAll()"><span class="glyphicon glyphicon-trash"></span> 批量删除</button>
					</div>
					<div class="form-group btn-group">
						<a href="releaseNews.html" target="contentFrame" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span> 发布新闻</a>
					</div>
				</form>
		  </div>
      <!-- 表格 -->
      <div class="container-fluid">
      	<table class="table table-bordered table-striped table-hover">
      		<thead>
				<th><input type="checkbox" class="ck" value="null"> 全选</th>
      			<th>ID</th>
      			<th>标题</th>
      			<th>栏目名称</th>
      			<th>新闻来源</th>
      			<th>是否置顶</th>
      			<th>状态</th>
      			<th>操作人</th>
      			<th>创建时间</th>
      			<th>修改时间</th>
      			<th>操作</th>
      		</thead>
      		<tbody>
				<c:if test="${empty msg}">
					<c:forEach items="${newsList}" var="n">
						<tr>
							<td><input type="checkbox" name="check" value="${n.id}"></td>
							<td>${n.id}</td>
							<td>${n.title}</td>
							<td>${n.descr}</td>
							<td>${n.source}</td>

							<c:if test="${n.top eq '1'}">
								<td>是</td>
							</c:if>
							<c:if test="${n.top eq '0'}">
								<td>否</td>
							</c:if>
							<td>已发布</td>
							<td>${n.optor}</td>
							<td>${fn:substring(n.crtime,0,19)}</td>
							<td>${fn:substring(n.uptime,0,19)}</td>
							<td>
								<a href="updateNews.html?id=${n.id}&pageNum=${page.pageNum}"  class="btn btn-link btn-xs" >编辑</a>
								<%--<a href="delUser?id=${u.id}" type="button" class="btn btn-link btn-xs" >删除</a>--%>
								<button type="button" class="btn btn-link btn-xs" onclick="remove(${n.id})">删除</button>
							</td>
						</tr>
					</c:forEach>
				</c:if>
				<c:if test="${not empty msg}">
					<h4 style="color: red" align="center">${msg}</h4>
				</c:if>
      		</tbody>

      	</table>
      </div>
      <!-- 分页 -->
      <div class="container-fluid">
      	<nav class="page-nav">
      		<ul class="pagination">
				<c:if test="${empty title}">
					<li><a href="NewsManagement.html?pageNum=${page.prePage}"><span>上一页</span></a></li>
				</c:if>
				<c:if test="${not empty title}">
					<li><a href="NewsManagement.html?pageNum=${page.prePage}&title=${title}"><span>上一页</span></a></li>
				</c:if>
				<li><span>当前页${page.pageNum}/${page.pages}</span></li>

				<c:if test="${empty title}">
					<c:choose>
						<c:when test="${page.pages<=5}">
							<c:forEach begin="1" end="${page.pages<5?page.pages:5}" var="i">
								<li><a href="NewsManagement.html?pageNum=${i}">${i}</a></li>
							</c:forEach>
						</c:when>
						<c:when test="${page.pages>5}">
							<c:if test="${page.pageNum<=3}">
								<c:forEach begin="1" end="${page.pages<5?page.pages:5}" var="i">
									<li><a href="NewsManagement.html?pageNum=${i}">${i}</a></li>
								</c:forEach>
							</c:if>
							<c:if test="${page.pageNum>3&&page.pageNum<=page.pages-2}">
								<c:forEach begin="${page.pageNum-2}" end="${page.pageNum}" var="i">
									<li><a href="NewsManagement.html?pageNum=${i}">${i}</a></li>
								</c:forEach>
								<c:forEach begin="${page.pageNum+1}" end="${page.pageNum+2}" var="i">
									<li><a href="NewsManagement.html?pageNum=${i}">${i}</a></li>
								</c:forEach>
							</c:if>
							<c:if test="${page.pageNum>page.pages-2&&page.pageNum<=page.pages}">
								<c:forEach begin="${page.pages-4}" end="${page.pages}" var="i">
									<li><a href="NewsManagement.html?pageNum=${i}">${i}</a></li>
								</c:forEach>

							</c:if>
						</c:when>
					</c:choose>
				</c:if>
				<c:if test="${not empty title}">
					<c:choose>
						<c:when test="${page.pages<=5}">
							<c:forEach begin="1" end="${page.pages<5?page.pages:5}" var="i">
								<li><a href="NewsManagement.html?pageNum=${i}&title=${title}">${i}</a></li>
							</c:forEach>
						</c:when>
						<c:when test="${page.pages>5}">
							<c:if test="${page.pageNum<=3}">
								<c:forEach begin="1" end="${page.pages<5?page.pages:5}" var="i">
									<li><a href="NewsManagement.html?pageNum=${i}&title=${title}">${i}</a></li>
								</c:forEach>
							</c:if>
							<c:if test="${page.pageNum>3&&page.pageNum<=page.pages-2}">
								<c:forEach begin="${page.pageNum-2}" end="${page.pageNum}" var="i">
									<li><a href="NewsManagement.html?pageNum=${i}&title=${title}">${i}</a></li>
								</c:forEach>
								<c:forEach begin="${page.pageNum+1}" end="${page.pageNum+2}" var="i">
									<li><a href="NewsManagement.html?pageNum=${i}&title=${title}">${i}</a></li>
								</c:forEach>
							</c:if>
							<c:if test="${page.pageNum>page.pages-2&&page.pageNum<=page.pages}">
								<c:forEach begin="${page.pages-4}" end="${page.pages}" var="i">
									<li><a href="NewsManagement.html?pageNum=${i}&title=${title}">${i}</a></li>
								</c:forEach>

							</c:if>
						</c:when>
					</c:choose>
				</c:if>

				<c:if test="${empty title}">
					<li><a href="NewsManagement.html?pageNum=${page.nextPage}"><span>下一页</span></a></li>
				</c:if>
				<c:if test="${not empty title}">
					<li><a href="NewsManagement.html?pageNum=${page.nextPage}&title=${title}"><span>下一页</span></a></li>
				</c:if>
      		</ul>
      	</nav>
      </div>
      <!-- 新增窗体 -->
      <div id="addWin" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<form id="addForm" class="form-horizontal" action="addUser" method="get">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">&times;</button>
							<div class="modal-title">
								<h4>新增用户</h4>
							</div>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label class="control-label col-md-2">姓名</label>
								<div class="col-md-9">
									<input type="text" class="form-control" id="addName" placeholder="请输入姓名" name="name">
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-md-2">用户名</label>
								<div class="col-md-9">
									<input type="text" class="form-control" id="addAcct" placeholder="请输入用户名" name="title">
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-md-2">密码</label>
								<div class="col-md-9">
									<input type="password" class="form-control" id="addPwd" placeholder="请输入密码" name="password">
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-primary">确定</button>
							<button type="reset" class="btn btn-default">重置</button>
							<button type="button" class="btn btn-default" onclick="closeAdd()">取消</button>
						</div>
					</form>
				</div>
			</div>
      </div>
      <!-- 编辑窗体 -->
      <div id="editWin" class="modal fade">
      	<div class="modal-dialog">
      		<div class="modal-content">
      			<div class="modal-header">
      				<button type="button" class="close" data-dismiss="modal">&times;</button>
      				<div class="modal-title">
      					<h4>编辑新闻</h4>
      				</div>
      			</div>
				<h1>${page.pageNum}</h1>
				<form id="editForm" class="form-horizontal" action="updateUser?" method="get">
					<div class="modal-body">
						<input type="hidden" id="editId" name="id">
						<input type="hidden" id="pageNum" name="pageNum">
						<div class="form-group">
							<label class="control-label col-md-2">姓名</label>
							<div class="col-md-9">
								<input type="text" class="form-control" id="editName" name="name">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">用户名</label>
							<div class="col-md-9">
								<input type="text" class="form-control" id="editAcct" name="title">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-2">密码</label>
							<div class="col-md-9">
								<input type="password" class="form-control" id="editPwd" name="password">
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary" >确定</button>
						<button type="reset" class="btn btn-default" >重置</button>
						<button type="button" class="btn btn-default" onclick="closeEdit()">取消</button>
					</div>
				</form>
      		</div>
      	</div>
      </div>
    </div>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/tools.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      // 清空查询表单
      function clearSearchForm(){
        $('#searchForm')[0].reset();
      }
      // 打开新增窗体
      function openAdd(){
        $('#addWin').modal('show');
      }
      // 关闭新增窗体
      function closeAdd(){
        $('#addForm')[0].reset();
        $('#addWin').modal('hide');
      }
      // 打开编辑窗体
      function openEdit(id,pageNum){
		  $.ajax({
			  type:"get",
			  url:"${pageContext.request.contextPath}/getUser?id=" + id,
			  success:function (rs) {
				  console.log(rs);
				  var user = JSON.parse(rs);
				  console.log(user);
				  $('#editId').val(id);
				  $('#pageNum').val(pageNum);
				  $('#editName').val(user.name);
				  $('#editAcct').val(user.acct);
				  $('#editPwd').val(user.pwd);
				  $('#editWin').modal('show');
			  }
		  });

      }
      // 关闭编辑窗体
      function closeEdit(){
        $('#editForm')[0].reset();
        $('#editWin').modal('hide');
      }
      // 新增
	  function add() {

	  }
      // 编辑
      function edit(id){
        alert('编辑成功');
        closeEdit();
      }
      // 删除
      function remove(id){
		  layer.confirm('确定要删除吗？', {
			  btn: ['确定','取消'] //按钮
		  }, function(){
		  		// 发送删除请求
			  $.ajax({
				  async:false,
				  url:"delNews",
				  type:"post",
				  data:{id:id},
				  success:function (rs) {
				  	  console.log(rs);
					  window.location.reload();
				  }
			  });
		  }, function(){
			  layer.msg('取消删除');
		  });
      }
	  //批量删除
	  function delAll() {
		  alert("确定要删除吗？")
		  //定义一个空的数组
		  var checkId = [];
		  if ($("input[type='checkbox']:checked").length > 0){
			  $("input[type='checkbox']:checked").each(function (i) {
				  //选中框的值付给定义的数组
				  checkId[i] = $(this).val();
			  })
			  //赋值完后传入后台
			  window.location.href="delNews?checkId=" + checkId;
		  }else {
			  alert("请选择你要删除的信息");
		  }
	  }
	  //全选
	  $(".ck").click(function () {
		  var ck = document.getElementsByClassName('ck')[0];
		  $("input[name='check']").prop("checked",ck.checked);
	  })
    </script>
	</body>
</html>
